<!--
 作者：ex_baiyc
 日期：2016-11-3
 功能：首页-知己彼-品牌对比-品牌整体评价对比
 参数：
 事件：
-->
<template>
  <div class="the-sales">
    <toolbar :view-title="viewTitle">
      <div
        class="leftButton"
        type="button"
        slot="left-button"
        v-link='{path: "/peer"}'>&nbsp;
      </div>
      <div
        class="rightButton"
        type="button"
        slot='right-button'>
        <div class="filterButton" @click="showFilter" v-show="!filterOpenState">
          <span class="filterIcon" :page-id="routeKey">&nbsp;</span>
          <span>筛选</span>
        </div>
        <div class="menuButton" @click="showSlideMenu" v-show="!filterOpenState">
          <span class="menuIcon">&nbsp;</span>
          <span>菜单</span>
        </div>
        <span v-show="filterOpenState" @click="doFilter" class="filterOver">完成</span>
      </div>
    </toolbar>
    <div class="the-sales-content">
      <div class="top-wrap">
        <select-for-brand :select-a-text="'选择品牌A'"
                          :select-b-text="'选择品牌B'"
                          :default-brand="defaultBrand"
                          :default-org-id="defaultOrgId"
                          :default-category="defaultCategory"
                          :default-category-id="defaultCategoryId"></select-for-brand>
        <div class="filter-message-box clearfix">
          <a  v-if="defaultCategory !== ''" class="filter-condition" @click="showFilter('pinlei')" href="javascript:;">{{defaultCategory}}</a>
          <span>
          <a v-if="UrlParams.platform !== ''" class="filter-condition" @click="showFilter('pingtai')" href="javascript:;">{{pingtai}}</a>
          <a v-if="UrlParams.platform === ''" class="filter-condition" @click="showFilter('pingtai')" href="javascript:;">所有平台</a>
        </span>
          <a class="filter-condition" @click="showFilter('shijian')" href="javascript:;">{{UrlParams.startTime | formatDate}} - {{UrlParams.endTime | formatDate}}</a>
        </div>
      </div>

      <div class="content">
        <section class="section">
          <div class="sub-title">
            <div class="sub-title-text">{{chartData1.subTitle}}</div>
            <!-- <div class="sub-title-time">{{chartData1.starttime | formatDate}} - {{chartData1.endtime | formatDate}}</div> -->
          </div>
          <div v-show="!noData">
            <div class="display-flex text-center">
              <div class="flex1">
                <h3 class="">{{chartData1.brand}}</h3>
              </div>
              <div class="flex1">
                <h3 class="">{{chartData2.brand}}</h3>
              </div>
            </div>
            <div class="display-flex">
              <gauge-chart-view :chart-data='chartData1' :chart-height="'31vh'" :chart-width="'100%'"></gauge-chart-view>
              <gauge-chart-view :chart-data='chartData2' :chart-height="'31vh'" :chart-width="'100%'"></gauge-chart-view>
            </div>
            <div class="display-flex">
              <div class="flex1 pl100">
                <p class="">{{chartData1.message.split('，')[3]}}</p>
                <p class="">{{chartData1.message.split('，')[0]}}</p>
                <p class="">{{chartData1.message.split('，')[1]}}</p>
                <p class="">{{chartData1.message.split('，')[2]}}</p>
              </div>
              <div class="flex1 pl100">
                <p class="">{{chartData2.message.split('，')[3]}}</p>
                <p class="">{{chartData2.message.split('，')[0]}}</p>
                <p class="">{{chartData2.message.split('，')[1]}}</p>
                <p class="">{{chartData2.message.split('，')[2]}}</p>
              </div>
            </div>
          </div>
          <div>
            <div class="nodata-wrap" v-if="noData">
             <h1>暂无相关数据!</h1>
            </div>
          </div>
        </section>

        <section class="section">
          <div class="sub-title">
            <div class="sub-title-text">{{chartData3.subTitle}}</div>
            <!-- <div class="sub-title-time">{{chartData3.starttime | formatDate}} - {{chartData3.endtime | formatDate}}</div> -->
          </div>
          <p class="p10">{{chartData3.message}}</p>
          <bar-chart-view v-show="!noData"  :chart-data='chartData3' :chart-height="'71vh'" :chart-width="'90%'"></bar-chart-view>
          <div>
            <div class="nodata-wrap" v-if="noData">
             <h1>暂无相关数据!</h1>
            </div>
          </div>
        </section>
      </div>
    </div>
    <filter-view v-show="filterOpenState"
                 :condition="conditions"
                 :page-id="routeKey"
                 :choose-platforms="pingtai"
                 :choose-platforms-id="pingtaiId"
                 :default-start-date="UrlParams.startTime"
                 :default-end-date="UrlParams.endTime"
                 :default-org-id="defaultOrgId"
                 :default-category="defaultCategory"
                 :default-category-id="defaultCategoryId"></filter-view>
    <slide-menu v-show="menuOpenState"></slide-menu>
    <page-turning :mkey="routeKey" :page-id="'peer'"></page-turning>
    <div class="loading-box">
      <img src="../../../../static/img/loading.gif" class="loading">
    </div>
    <confirm :show.sync="timeoutStatus"
     title="加载失败,您可以"
     cancel-text="返回首页"
     confirm-text="重新加载"
     @on-cancel="this.$route.router.go('/home')"
     @on-confirm="reload"></confirm>
  </div>
</template>

<script>
  import Toolbar from '../../common/Toolbar.vue'
  import FilterView from '../../common/FilterView.vue'
  import SelectForBrand from '../../peer/selectForBrand.vue'
  import GaugeChartView from '../../common/GaugeChartView.vue'
  // import BarChartView from '../../common/BarChartView.vue'
  import BarChartView from '../../common/BarChartViewPercent.vue'
  import SlideMenu from '../../peer/SlideMenu.vue'
  import pageTurning from '../../common/pageTurning.vue'
  import Confirm from 'vux/dist/components/Confirm'

  export default{
    components: {
      Toolbar,
      FilterView,
      SelectForBrand,
      GaugeChartView,
      BarChartView,
      SlideMenu,
      pageTurning,
      Confirm
    },
    data () {
      return {
        pingtai: '所有平台',
        pingtaiId: '',
        noData: false,
        timeoutStatus: false,
        routeKey: '',
        menuOpenState: false,
        viewTitle: '品牌整体评价对比',
        filterOpenState: false,
        defaultBrand: '',
        defaultOrgId: '',
        defaultCategory: '',
        defaultCategoryId: '',
//        图表option的基本参数, 待请求完成后加入数据
        chartData1: {
          starttime: '',
          endtime: '',
          subTitle: '',
          seriesData: 0,
          brand: '',
          message: ''
        },
        chartData2: {
          legend: [],
          colors: ['#FF8B8B', '#FFD38B'],
          seriesData: 0,
          brand: '',
          message: ''
        },
        chartData3: {
          subTitle: '',
          starttime: '',
          endtime: '',
          message: '',
          legend: [],
          xAxisData: [],
          yAxisData: [],
          splitNumber: 2,
          axisLableInterval: 1,
          colors: ['#B18EF9', '#92B4F9'],
          series: [
            {
              name: '',
              type: 'bar',
              barGap: 0,
              barMaxWidth: 10,
              data: []
            },
            {
              name: '',
              type: 'bar',
              barGap: 0,
              barMaxWidth: 10,
              data: []
            }
          ]
        },
//        参数
        UrlParams: {
          pageId: 66,
          mkey: 'brandOverallEvaluation',
          dateSeg: 'other',
          startTime: '',
          endTime: '',
          category_id: '',
          category: '',
          brand1: '',
          brand2: '',
          brand: '',
          org_code: '',
          platform: ''
        }
      }
    },
    methods: {
      reload: function () {
        window.location.reload()
      },
//      显示筛选窗口
      showFilter: function () {
        this.filterOpenState = true
      },
//      显示页面导航侧栏
      showSlideMenu: function () {
        this.menuOpenState = !this.menuOpenState
        var self = this
        setTimeout(function () {
          self.$broadcast('slideStart')
        }, 0)
      },
//      执行筛选
      doFilter: function () {
        this.$broadcast('doFilter')
        this.filterOpenState = false
      },
//      获取数据
      getData: function (params) {
        this.$http.post(window.interface.peerData, params, {_timeout: 30000}).then((res) => {
          if (res.json().error) {
            this.timeoutStatus = true
            return
          }
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          this.chartData3.legend = []
          this.chartData3.xAxisData = []
          this.chartData3.yAxisData = []
          this.chartData3.series[0].data = []
          this.chartData3.series[1].data = []
          var data = res.json()
          // if (!data.chartDatas[0] || data.chartDatas[0].detail.length === 0 || !data.chartDatas[1] || data.chartDatas[1].detail.length === 0) {
          //   window.alert('当前条件下无数据,请重新选择!')
          //   this.filterOpenState = true
          //   return
          // }
          this.pingtai = data.platformCnd || data.platform
          this.pingtaiId = data.platform_id
          this.modelA = data.brand1 || '选择品牌A'
          this.modelB = data.brand2 || '选择品牌B'
          this.defaultBrand = data.brand
          this.UrlParams.startTime = data.startTime || ''
          this.UrlParams.endTime = data.endTime || ''
          this.defaultOrgId = data.org_code || ''
          this.defaultCategory = this.UrlParams.category = data.category || ''
          this.defaultCategoryId = this.UrlParams.category_id = data.category_id || ''
          this.$broadcast('loadDataDone')
          this.viewTitle = data.title
          var chart1 = data.chartDatas[0].detail
          var chart2 = data.chartDatas[1].detail
          if (chart1.length < 2) {
            this.noData = true
            return
          } else {
            this.noData = false
          }
          try {
            this.chartData1.subTitle = data.chartDatas[0].subTitle || ''
            this.chartData1.starttime = data.chartDatas[0].starttime || ''
            this.chartData1.endtime = data.chartDatas[0].endtime || ''

            this.chartData1.seriesData = chart1[0].scroe || '0'
            this.chartData2.seriesData = chart1[1].scroe || '0'
            this.chartData1.message = chart1[0].message || ''
            this.chartData2.message = chart1[1].message || ''

            this.chartData1.brand = chart1[0].brand
            this.chartData2.brand = chart1[1].brand

            this.chartData3.starttime = data.chartDatas[1].starttime || ''
            this.chartData3.subTitle = data.chartDatas[1].subTitle || ''
            this.chartData3.endtime = data.chartDatas[1].endtime || ''
            this.chartData3.message = data.chartDatas[1].message[0] || ''

            this.chartData3.legend.push({name: chart2[0].legend, icon: 'rect'})
            this.chartData3.legend.push({name: chart2[1].legend, icon: 'rect'})
            this.chartData3.series[0].name = chart2[0].legend
            this.chartData3.series[1].name = chart2[1].legend
          } catch (error) {
          }
          for (var i = 0; i < chart2.length; i++) {
            if (i % 2 === 0) {
              this.chartData3.yAxisData.push(chart2[i].category)
              this.chartData3.series[0].data.push(chart2[i].value)
            } else if (i % 2 === 1) {
              this.chartData3.series[1].data.push(chart2[i].value)
            }
          }
        }, (res) => {
          this.timeoutStatus = true
        })
      }
    },
    events: {
//      接收filter组件回传回来的值，然后再根据值重新请求页面数据
      'filterConditions': function (filterConditions) {
//        this.UrlParams.department = filterConditions.department || ''
        this.UrlParams.category = filterConditions.category || ''
        this.UrlParams.category_id = this.defaultCategoryId = filterConditions.category_id || ''
        this.UrlParams.platform = filterConditions.platform || ''
        this.UrlParams.platform_id = filterConditions.platform_id || ''
        this.UrlParams.startTime = filterConditions.starttime || ''
        this.UrlParams.endTime = filterConditions.endtime || ''
        this.UrlParams.dateSeg = filterConditions.dateSeg || ''
        this.UrlParams.org_code = filterConditions.org_code || ''
        this.UrlParams.brand = ''
        this.UrlParams.brand1 = ''
        this.UrlParams.brand2 = ''
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        this.getData(this.UrlParams)
      },
//      选择品牌后重新获取数据
      'chooseBrand': function (brandA, brandB) {
        this.UrlParams.brand1 = brandA
        this.UrlParams.brand2 = brandB
        this.UrlParams.brand = brandA + ',' + brandB
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        this.getData(this.UrlParams)
      }
    },
    ready: function () {
      this.getData(this.UrlParams)
      this.routeKey = this.$route.query.key
    },
    created: function () {
      this.routeKey = this.$route.query.key
    }
  }
</script>

<style lang="scss" scoped>
  .the-sales-content {
    position: relative;
    margin-top: 30vh;
    margin-bottom: 8vh;
  }

  .content{
    /*height: 62vh;*/
    overflow-y: scroll;
  }
  .section {
    border-top: 1.3vh solid #f2f2f2;
    padding-bottom: .3rem;
  }

  .sub-title {
    margin-bottom: .2rem;
    padding: .2rem;
    font-size: .32rem;
    color: #000;
    border-bottom: 1px solid #f2f2f2;

    .sub-title-text {
      padding-left: .7rem;
      background: url('../../../../static/img/time-title2.png') no-repeat .3rem center / .28rem .26rem;
    }

    .sub-title-time {
      padding-left: .7rem;
      background: url('../../../../static/img/time-time.png') no-repeat .3rem center / .28rem .26rem;
      font-size: .26rem;
      margin-top: 1.4vh;
      height: 3vh;
      line-height: 3vh;
      color: #999;
    }

  }

  .btnPage {
    position: fixed;
    left: 0;
    top: 50vh;
    width: 100%;
    z-index: 200;
  }

  .btn-previous {
    width: 0.4rem;
    height: 0.8rem;
    float: left;
    background: rgba(0, 0, 0, 0.2);
  }

  .btn-next {
    width: 0.4rem;
    height: 0.8rem;
    float: right;
    background: rgba(0, 0, 0, 0.2);
  }

  .p10 {
    padding: .3rem;
  }

  .filter-message-box{
    padding: 0rem .2rem .2rem;
    font-size: 0.28rem;
  }

  .nodata-wrap{
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: #FFF;
    text-align: center;
  }

  .top-wrap{
    position: fixed;
    top: 6.6vh;
    left: 0;
    right: 0;
    background: #FFF;
    z-index: 1;
  }
</style>
